<script setup lang="ts">
import formButton from '@renderer/components/formButton.vue'
import NavBar from '@renderer/components/navBar.vue'
import wardrobeForm from '@renderer/components/wardrobeForm.vue'
import useComputeForm from '@renderer/composables/useComputeForm'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Round, CheckOne } from '@icon-park/vue-next'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const wardrobeRef = ref()
const getWardrobeData = async () => {
  const wardrobeDataSubmitForm = [] as any[]
  if (wardrobeRef.value) {
    for (const item of wardrobeRef.value) {
      let collectList = await item.getDataInit()
      wardrobeDataSubmitForm.push(collectList)
    }
    return wardrobeDataSubmitForm
  } else {
    return []
  }
}
defineExpose({
  getWardrobeData,
})
const props = defineProps<{
  selectRoomList: string[]
}>()
const addWardrobeDialog = ref(false)
const allRoom = ref<string[]>([])
const wardrobeList = ref<WardrobeListModel[]>([])
const checkRoom = ref<string[]>([])

const handleAddRoom = () => {
  addWardrobeDialog.value = true
}
const handleCheckRoom = (item: any) => {
  if (checkRoom.value.includes(item)) {
    const index = checkRoom.value.findIndex((ceilingItem) => ceilingItem === item)
    if (index != -1) {
      checkRoom.value.splice(index, 1)
    }
  } else {
    checkRoom.value.push(item)
  }
}
// const handleReset = () => {
//   checkRoom.value = []
// }
const handleClose = () => {
  addWardrobeDialog.value = false
}
watch(
  () => props.selectRoomList,
  (newValue) => {
    allRoom.value = []
    const optionList = [
      '客厅',
      '餐厅',
      '过道',
      '主卧',
      '次卧1',
      '次卧2',
      '次卧3',
      '次卧4',
      '厨房',
      '阳台1',
      '阳台2',
      '阳台3',
      '阳台4',
      '衣帽间',
      '楼梯间',
    ]
    if (newValue.length) {
      const missingIndexes = checkRoom.value
        .map((item, index) => (newValue.includes(item) ? null : index))
        .filter((index) => index !== null)
      if (missingIndexes.length) {
        missingIndexes.forEach((item) => {
          checkRoom.value.splice(item, 1)
        })
      }
      newValue.forEach((item) => {
        if (optionList.includes(item)) {
          allRoom.value.push(item)
        }
      })
    } else {
      checkRoom.value = []
    }
  },
)
const { getWardrobeGather, getHouseGather } = useComputeForm()
const initForm = async () => {
  const res = await getWardrobeGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  const getRoomRes = await getHouseGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length) {
    wardrobeList.value = res
    res.forEach((item) => {
      checkRoom.value.push(item.area_name)
    })
  }
  if (getRoomRes.length) {
    allRoom.value = []
    let newValue = [] as any[]
    getRoomRes.forEach((item) => {
      newValue.push(item.name)
    })
    const optionList = [
      '客厅',
      '餐厅',
      '过道',
      '主卧',
      '次卧1',
      '次卧2',
      '次卧3',
      '次卧4',
      '厨房',
      '阳台1',
      '阳台2',
      '阳台3',
      '阳台4',
      '衣帽间',
      '楼梯间',
    ]
    const missingIndexes = checkRoom.value
      .map((item, index) => (newValue.includes(item) ? null : index))
      .filter((index) => index !== null)
    if (missingIndexes.length) {
      missingIndexes.forEach((item) => {
        checkRoom.value.splice(item, 1)
      })
    }
    newValue.forEach((item) => {
      if (optionList.includes(item)) {
        allRoom.value.push(item)
      }
    })
  } else {
    checkRoom.value = []
  }
}
await initForm()
</script>

<template>
  <main>
    <el-divider>
      <span class="text-xl">成品衣柜数据</span>
    </el-divider>
    <div class="flex justify-end gap-5">
      <formButton @click="handleAddRoom">添加房间</formButton>
    </div>
    <div class="flex flex-col gap-2" v-for="item in checkRoom" :key="item">
      <el-divider content-position="left">
        <span class="text-xl">{{ item }} </span>
      </el-divider>
      <wardrobeForm :roomName="item" ref="wardrobeRef" :wardrobeList="wardrobeList" />
    </div>
    <el-dialog v-model="addWardrobeDialog" width="640" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col">
        <NavBar title="新增衣柜采集" @handleClose="handleClose" />
        <div class="grid grid-cols-4 gap-y-5 gap-x-10 p-3">
          <div
            v-for="(item, index) in allRoom"
            :key="index"
            class="flex justify-between items-center py-2 px-3 rounded-md"
            :class="checkRoom.includes(item) ? 'bg-[#fff4e5] text-[#FF9600]' : 'bg-[#EEEEEE] text-black'"
            @click="handleCheckRoom(item)">
            <span>{{ item }}</span>
            <Round theme="outline" size="18" fill="#FF9600" v-if="!checkRoom.includes(item)" />
            <CheckOne theme="outline" size="18" fill="#FF9600" v-else />
          </div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>

<style lang="scss"></style>
